<template>
  <el-cascader class="deviceType_select" :class="{ wider: props.wider }" v-model="deviceTypeId" :props="props.deviceProps" :options="treeList.currentTree"
    :placeholder="placeholder_text" @change="handleChange" clearable />
</template>

<script setup lang="ts">
import { getTreeData, spaceGetTreeData } from "@/http/device";
const props = defineProps({
  deviceProps: {
    type: Object,
    default: {
      checkStrictly: false,
      expandTrigger:'hover' as const
    }
  },
  needAll: {
    type: Boolean,
    default: false
  },
  selectData: {
    type: Array,
    default: [] as any
  },
  wider: {
    type: Boolean,
    default: false
  },
  needFirst: {//是否需要setup中请求列表
    type: Boolean,
    default: true
  },
  location: { // 设备位置
      type: Boolean,
      default: false
  },
  placeholder_text:{
    type: String,
    default: " "
  }
})
let deviceTypeId: any = ref('');
watch(() => props.selectData, (newValue, oldValue) => {
  // console.log('30',newValue);
  if(newValue){
    deviceTypeId.value = newValue
  }

});

interface Tree {
  // id: number
  value: string
  label: string
  children?: Tree[]
}

const treeList = reactive({
  tree: [] as Array<Tree>,//系统/类别/类型/设备树形结构(element 所需要的格式)
  treeAndAll: [] as Array<Tree>,//系统/类别/类型/设备树形结构(element 所需要的格式 加了一个全部选项)
  list: [] as any,//系统/类别/类型/设备列表
  currentTree: [] as Array<Tree> //当前所需要的格式(有的需要全部,有的不需要)
})

const emit = defineEmits(['getDeviceTypeId', 'getTreeList']);
//所属系统/类别/类型/设备改变时
const handleChange = (val: any) => {
  // console.log('48', val);
  // deviceTypeId.value = val[val.length - 1];
  emit('getDeviceTypeId', val);
}

const getTreeList = () => {
  if(props.location) {
    spaceGetTreeData().then((res: any) => {
      if (res && res.result && res.result) {
        treeList.list = res.result;
        let list_new: any = [];
        if (treeList.list.length > 0) {
          treeList.list.forEach((item: any, index: number) => {
            list_new.push({ value: { id: item.id, name: item.name }, label: item.name, children: [] })
            if (item.childList.length > 0) {
              item.childList.forEach((item2: any, index2: number) => {
                list_new[index].children.push({ value: { id: item2.id, name: item2.name }, label: item2.name, children: [] })
                if (item2.childList.length > 0) {
                  item2.childList.forEach((item3: any, index3: number) => {
                    list_new[index].children[index2].children.push({ value: { id: item3.id, name: item3.name }, label: item3.name, children: [] })
                    if (item3.childList.length > 0) {
                      item3.childList.forEach((item4: any, index4: number) => {
                        list_new[index].children[index2].children[index3].children.push({ value: { id: item4.id, name: item4.name }, label: item4.name, children: [] })
                      });
                    }
                  });
                }
              });
            }
          })
        }
        treeList.tree = list_new;
        treeList.treeAndAll = JSON.parse(JSON.stringify(list_new));
        //筛选条件加上全部,弹窗新增和编辑不需要全部选项
        treeList.treeAndAll.unshift({ value: " ", label: "全部", children: [] })
        // console.log('tree', treeList.tree);
        emit('getTreeList', treeList);
        if (props.needAll) {
          treeList.currentTree = treeList.treeAndAll;
        } else {
          treeList.currentTree = treeList.tree;
        }
      }
    })
  } else {
    getTreeData().then((res: any) => {
      if (res && res.result && res.result) {
        treeList.list = res.result;
        let list_new: any = [];
        if (treeList.list.length > 0) {
          treeList.list.forEach((item: any, index: number) => {
            list_new.push({ value: { id: item.id, name: item.name }, label: item.name, children: [] })
            if (item.childList.length > 0) {
              item.childList.forEach((item2: any, index2: number) => {
                list_new[index].children.push({ value: { id: item2.id, name: item2.name }, label: item2.name, children: [] })
                if (item2.childList.length > 0) {
                  item2.childList.forEach((item3: any, index3: number) => {
                    list_new[index].children[index2].children.push({ value: { id: item3.id, name: item3.name }, label: item3.name, children: [] })
                    if (item3.childList.length > 0) {
                      item3.childList.forEach((item4: any, index4: number) => {
                        list_new[index].children[index2].children[index3].children.push({ value: { id: item4.id, name: item4.name }, label: item4.name, children: [] })
                      });
                    }
                  });
                }
              });
            }
          })
        }
        treeList.tree = list_new;
        treeList.treeAndAll = JSON.parse(JSON.stringify(list_new));
        //筛选条件加上全部,弹窗新增和编辑不需要全部选项
        treeList.treeAndAll.unshift({ value: " ", label: "全部", children: [] })
        // console.log('tree', treeList.tree);
        emit('getTreeList', treeList);
        if (props.needAll) {
          treeList.currentTree = treeList.treeAndAll;
        } else {
          treeList.currentTree = treeList.tree;
        }
      }
    })
  }
  
}

if (props.needFirst) {
  getTreeList();
}


//清空
const empty = () => {
  deviceTypeId.value = " ";
}

//暴露方法,父组件才能调用
defineExpose({ empty,getTreeList });
</script>

<style lang="scss">
.wider {
    width: 300px !important;
      .el-input {
          width: 100%;
      }
  }
</style>
